<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
<%@include file="/resources/common/commonTaglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 导入资源文件 -->
<%@include file="/resources/common/commonJs.jsp" %>
<%@include file="/resources/common/commonCss.jsp" %>
<!-- 图片上传 -->
<script src="${path }/resources/zui-1.6.0/lib/chart/zui.chart.js"></script>
<title>${courseName }单科成绩分析展示</title>
<style type="text/css">
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    color: #fff;
    cursor: default;
    background-color: #3280FC;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
    }
</style>
<script type="text/javascript">

// 图表配置项，可以留空来使用默认的配置
var options = {
    scaleShowLabels: true, // 展示标签
};

function cancelChart() {
	$('#chartDiv').hide();
}
var chartObj = null;
$(function() {
	//添加班级的点击事件
	$('.chartAnalysis').on('click', function() {
		
		//获取基本信息
		var tab = $(this).next().find('table');
		var tr =tab.find('tr:eq(1)');
		d120to110 = parseInt(tr.find('td:eq(0)').text());
		d110to100 = parseInt(tr.find('td:eq(1)').text());
		d100to90 = parseInt(tr.find('td:eq(2)').text());
		d90to80 = parseInt(tr.find('td:eq(3)').text());
		d80Down = parseInt(tr.find('td:eq(4)').text());
		//alert(d120to110 + ' ' + d110to100 + ' ' +d100to90 + ' ' + d90to80 + ' ' +  d80Down);
		var $title = $(this).html() + '成绩图表<a href="javascript:;" onclick="cancelChart()" style="color: red; float: right">关闭</a>';
		$('#chartTitle').html($title);
		$('#chartTitle').show();
		
		$('#chartDiv').show();
		var data = [{
		    value: d120to110,
		    color: "blue", // 使用颜色名称
		    label: "120-110人数"
		}, {
		    value: d110to100,
		    color:"#F7464A", // 自定义颜色
		    label: "110-100人数"
		}, {
		    value: d100to90,
		    color: 'green',
		    label: "100-90人数"
		}, {
		    value: d90to80,
		    color: 'yellow',
		    label: "90-80人数"
		}, {
			value: d80Down,
		    label: "80以下人数"
		}];
		if (chartObj != null) {
			chartObj.segments[0].value = d120to110;
			chartObj.segments[1].value = d110to100;
			chartObj.segments[2].value = d100to90;
			chartObj.segments[3].value = d90to80;
			chartObj.segments[4].value = d80Down;
			chartObj.update();
		} else {
			//创建图表
			chartObj = $("#topChart").pieChart(data, options);
		}
	});
	
})
</script>
</head>
<body>
<c:if test="${empty analysisModels }">
	<div>
		没有对应科目的成绩信息
	</div>
</c:if>
<c:if test="${!empty analysisModels }">
<ul class="nav nav-tabs">
	<c:forEach items="${analysisModels }" var="data" varStatus="i">
	<li <c:if test="${i.index == 0 }">class="active"</c:if>><a href="###" data-target="#${data.classId }" data-toggle="tab">${data.className }班</a></li>
	</c:forEach>
</ul>
<div class="tab-content">
<c:forEach items="${analysisModels }" var="data" varStatus="i">
	<div class="tab-pane fade<c:if test="${i.index == 0 }"> active in</c:if>" id="${data.classId}">
		<div class="listDataTableStyle">
			<table  cellpadding="0" cellspacing="0" width="100%">
				<tr>
					<th colspan="4">${data.className }班级基本信息统计</th>
				</tr>
				<tr>
					<td style="width: 20%">班级均分</td>
					<td style="width: 30%">${data.avgScore }</td>
					<td style="width: 20%">优秀率</td>
					<td style="width: 30%">${data.perfectPercent }%</td>
				</tr>
				<tr>
					<td>及格率</td>
					<td>${data.passPercent }%</td>
					<td>过差率</td>
					<td>${data.badPercent }%</td>
				</tr>
				<!-- 前10 s -->
				<tr>
					<td class="chartAnalysis" style="background-color: #F1F1F1; cursor: pointer;">前10名分析</td>
					<td colspan="3">
					<table style="width: 100%">
						<tr>
							<th>120-110</th>
							<th>110-100</th>
							<th>100-90</th>
							<th>90-80</th>
							<th>80分以下</th>
						</tr>
						<tr>
							<td>${data.top10.d120to110 }</td>
							<td>${data.top10.d110to100 }</td>
							<td>${data.top10.d100to90 }</td>
							<td>${data.top10.d90to80 }</td>
							<td>${data.top10.d80Down }</td>
						</tr>
					</table>
					</td>
				</tr>
				<!-- 前10 e -->
				<!-- 前20 s -->
				<tr>
					<td class="chartAnalysis" style="background-color: #F1F1F1; cursor: pointer;">前20名分析</td>
					<td colspan="3">
					<table style="width: 100%">
						<tr>
							<th>120-110</th>
							<th>110-100</th>
							<th>100-90</th>
							<th>90-80</th>
							<th>80分以下</th>
						</tr>
						<tr>
							<td>${data.top20.d120to110 }</td>
							<td>${data.top20.d110to100 }</td>
							<td>${data.top20.d100to90 }</td>
							<td>${data.top20.d90to80 }</td>
							<td>${data.top20.d80Down }</td>
						</tr>
					</table>
					</td>
				</tr>
				<!-- 前20 e -->
				<!-- 前30 s -->
				<tr>
					<td class="chartAnalysis" style="background-color: #F1F1F1; cursor: pointer;">前30名分析</td>
					<td colspan="3">
					<table style="width: 100%">
						<tr>
							<th>120-110</th>
							<th>110-100</th>
							<th>100-90</th>
							<th>90-80</th>
							<th>80分以下</th>
						</tr>
						<tr>
							<td>${data.top30.d120to110 }</td>
							<td>${data.top30.d110to100 }</td>
							<td>${data.top30.d100to90 }</td>
							<td>${data.top30.d90to80 }</td>
							<td>${data.top30.d80Down }</td>
						</tr>
					</table>
					</td>
				</tr>
				<!-- 前30 e -->
			</table>
		</div>
	</div>
</c:forEach>
</div>
</c:if>
<div id="chartDiv" style="position: fixed; top: 76px; right: 10px">
	<div style="background-color: #3280FC; color: #fff; font-weight: bold; display: none" id="chartTitle">成绩图表</div>
	<canvas id="topChart" width="200" height="200"></canvas>
</div>

</body>
</html>